<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8"/>
    <title>WAI-ARIA: Task 1</title>
    <style>
      body {
        background-color: #fff;
        color: #333;
        font: 1em / 1.4 Helvetica Neue, Helvetica, Arial, sans-serif;
        padding: 1em;
        margin: 0;
      }

      * {
        box-sizing: border-box;
      }

      div > div {
        padding-left: 20px;
        position: relative;
      }

      div > div::before {
        content: " ";
        width: 8px;
        height: 8px;
        background-color: black;
        border-radius: 50%;
        position: absolute;
        left: 0;
        top: 8px;
      }
    </style>
  </head>

  <body>
    <p>My favorite animals:</p>

    <div>
      <div>Pig</div>
      <div>Gazelle</div>
      <div>Llama</div>
      <div>Majestic moose</div>
      <div>Hedgehog</div>
    </div>

  </body>

</html>
